<template>
  <div class="dashboard-container">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="dashboard-stats">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon user-icon">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.userCount }}</div>
            <div class="stat-label">注册用户</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon company-icon">
            <i class="el-icon-office-building"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.companyCount }}</div>
            <div class="stat-label">入驻企业</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon job-icon">
            <i class="el-icon-suitcase"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.jobCount }}</div>
            <div class="stat-label">发布职位</div>
          </div>
        </div>
      </el-col>
      
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon application-icon">
            <i class="el-icon-message"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.applicationCount }}</div>
            <div class="stat-label">简历投递</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>用户注册趋势</span>
          </div>
          <div ref="userChart" class="chart-container"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>职位发布趋势</span>
          </div>
          <div ref="jobChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="dashboard-charts">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>热门职位分类</span>
          </div>
          <div ref="categoryChart" class="chart-container"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="chart-header">
            <span>最新动态</span>
          </div>
          <div class="activity-list">
            <div v-for="(activity, index) in activities" :key="index" class="activity-item">
              <div class="activity-icon">
                <i :class="activity.icon" :style="{ color: activity.color }"></i>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      statistics: {
        userCount: 0,
        companyCount: 0,
        jobCount: 0,
        applicationCount: 0
      },
      activities: [
        {
          title: '新用户张三完成注册',
          time: '5分钟前',
          icon: 'el-icon-user',
          color: '#409eff'
        },
        {
          title: '阿里巴巴发布了Java开发工程师职位',
          time: '10分钟前',
          icon: 'el-icon-suitcase',
          color: '#67c23a'
        },
        {
          title: '用户李四投递了简历',
          time: '15分钟前',
          icon: 'el-icon-message',
          color: '#e6a23c'
        },
        {
          title: '腾讯公司完成企业认证',
          time: '30分钟前',
          icon: 'el-icon-office-building',
          color: '#f56c6c'
        }
      ]
    }
  },
  mounted() {
    this.loadStatistics()
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.userChart) {
      this.userChart.dispose()
    }
    if (this.jobChart) {
      this.jobChart.dispose()
    }
    if (this.categoryChart) {
      this.categoryChart.dispose()
    }
  },
  methods: {
    async loadStatistics() {
      try {
        // TODO: 调用API获取统计数据
        this.statistics = {
          userCount: 1250,
          companyCount: 328,
          jobCount: 892,
          applicationCount: 5637
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
      }
    },
    
    initCharts() {
      this.initUserChart()
      this.initJobChart()
      this.initCategoryChart()
    },
    
    initUserChart() {
      this.userChart = echarts.init(this.$refs.userChart)
      const option = {
        title: {
          text: '最近7天用户注册量',
          textStyle: {
            fontSize: 14,
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [12, 23, 34, 18, 25, 31, 28],
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#409eff'
          }
        }]
      }
      this.userChart.setOption(option)
    },
    
    initJobChart() {
      this.jobChart = echarts.init(this.$refs.jobChart)
      const option = {
        title: {
          text: '最近7天职位发布量',
          textStyle: {
            fontSize: 14,
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [8, 15, 21, 12, 18, 24, 19],
          type: 'bar',
          itemStyle: {
            color: '#67c23a'
          }
        }]
      }
      this.jobChart.setOption(option)
    },
    
    initCategoryChart() {
      this.categoryChart = echarts.init(this.$refs.categoryChart)
      const option = {
        title: {
          text: '职位分类分布',
          textStyle: {
            fontSize: 14,
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 35, name: '技术开发' },
            { value: 25, name: '产品运营' },
            { value: 20, name: '市场销售' },
            { value: 15, name: '设计' },
            { value: 5, name: '其他' }
          ]
        }]
      }
      this.categoryChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-stats {
  margin-bottom: 20px;
  
  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      i {
        font-size: 24px;
        color: white;
      }
      
      &.user-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.company-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.job-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.application-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
    
    .stat-content {
      .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.dashboard-charts {
  margin-bottom: 20px;
  
  .chart-card {
    .chart-header {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .chart-container {
      height: 300px;
    }
    
    .activity-list {
      height: 300px;
      overflow-y: auto;
      
      .activity-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .activity-icon {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          
          i {
            font-size: 16px;
          }
        }
        
        .activity-content {
          flex: 1;
          
          .activity-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
          }
          
          .activity-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>